<template>
    <div class="content">
        <div class="mt30">
            <Select v-model="condition.userTypeId" clearable placeholder="请选择角色" @on-change="getList">
                <Option v-for="item in roleList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
            <Input class="mb10" search v-model="condition.keyWord" placeholder="请输入用户姓名" @on-search="getList" />
            <Button class="ml10 fr"  @click="getEdit('',0)">新增</Button>
        </div>
        <Table border class="mt20" ref="selection" :columns="columns2" :data="data1">
            <template slot-scope="{ row, index }" slot="user_type_id">
                <span v-for="(item,index) in roleList" v-if="row.user_type_id==item.value">{{item.label}}</span>
            </template>
            <template slot-scope="{ row, index }" slot="action" v-if="userId!==row.id">
                <span class="cursor cr2d8cf0" @click="seeDetail(row)">查看</span>
                <span class="cursor cr2d8cf0" @click="getEdit(row,1)">修改用户</span>
                <span class="cursor cr2d8cf0" @click="getDel(row,1)">删除用户</span>
            </template>
        </Table>
        <div class="disflex mt30">
            <Page :total="total" v-if="total>10" :current="condition.page" show-elevator @on-change="changepage"></Page>
        </div>
        <Modal
                v-model="isShow"
                :title="title"
                 width="500">
            <div class="input-item">
                <div class="input-item-list">
                    <span class="span"><span class="red">*</span>用户名：</span>
                    <Input placeholder="用户名" v-model="editList.realName" style="width: auto" />
                </div>
                <div class="input-item-list">
                    <span class="span"><span class="red">*</span>手机号：</span>
                    <Input placeholder="手机号" v-model="editList.mobile" style="width: auto" />
                </div>
                <div class="input-item-list">
                    <span class="span"><span class="red">*</span>角色：</span>
                    <Select v-model="editList.userTypeId" clearable placeholder="请选择角色" @on-change="getuserTypeId">
                        <Option v-for="(item,index) in user_type_id" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </div>
                <div class="input-item-list" v-if="noShow">
                    <span class="span"><span class="red">*</span>监管单位：</span>
                    <Select v-model="editList.superviseOrgId" clearable placeholder="请选择监管单位">
                        <Option v-for="item in orgList" :value="item.id" :key="item.id">{{ item.org_name }}</Option>
                    </Select>
                </div>
            </div>
            <div slot="footer">
                <Button type="text" size="large" @click="isShow=false">取消</Button>
                <Button  size="large" @click="getEdit('',isAdd)">确定</Button>
            </div>
        </Modal>
        <Modal
                v-model="isShow2"
                title="删除"
                @on-ok="getDel('',2)"
                @on-cancel="cancel" width="350">
            <div class="input-item">
                确定删除用户？
            </div>
        </Modal>
        <Modal
                v-model="isShow3"
                title="基本信息" width="400">
            <div class="input-item">
                <div class="distribute-Show2 lineH28" :gutter="20">
                    <div span="24"><span>用户名：</span>{{detail.real_name}}</div>
                    <div span="24"><span>手机号：</span> {{detail.mobile}}   </div>
                    <div span="24"><span>角色：</span><label v-for="(item,index) in roleList" v-if="detail.user_type_id==item.value">{{item.label}}</label></div>
                    <div span="24" v-for="item in orgList" v-if="detail.supervise_org_id==item.id"><span>监管单位：</span>{{item.org_name}}</div>
                </div>
            </div>
            <div slot="footer"></div>
        </Modal>
    </div>
</template>
<script>
    import { userList,userDelete,userEdit,userAdd,orgList,userInfo } from '@/api/systemManage'
    export default {
        data () {
            return {
                total:0,//总条数
                roleId:'',
                title:'编辑',
                roleList:[
                    {
                        value:'1',
                        label:'监管用户'
                    },{
                        value:'2',
                        label:'运营用户'
                    }
                ],
                editList:{
                    'id':'',
                    'mobile':'',
                    'realName':'',
                    'userTypeId':'1',
                    'superviseOrgId':'',
                },
                condition:{//头部筛选传参
                    keyWord:'',
                    userTypeId:'',
                    pageSize:10,
                    page:1
                },
                user_type_id:[
                    {
                        value:'1',
                        label:'监管用户'
                    },{
                        value:'2',
                        label:'运营用户'
                    }
                ],
                columns2: [
                    {
                        title: '用户',
                        key: 'real_name'
                    },
                    {
                        title: '手机号',
                        key: 'mobile'
                    },
                    {
                        title: '角色',
                        slot: 'user_type_id'
                    },
                    {
                        title: '操作',
                        slot: 'action',
                        width: 220,
                        align: 'center'
                    }
                ],
                data1: [],
                isShow:false,
                isShow2:false,
                isShow3:false,
                detail:'',
                id:'',
                isAdd:2,
                orgList:[],
                noShow:false,
                userId:'',
                isShowUser:false

            }
        },
        created(){
            this.getList();
            this.getOrgList();
            let userInfo = JSON.parse(window.localStorage.getItem('userInfo'))
            this.userId = userInfo.id
            if((userInfo.user_type_id==2)){
                this.$router.push({path: '/systemManage/overdueSetting', query: {}})
            }
        },
        methods: {
            //隐患处理人搜索
            searchPaper(result){
                console.log(result)
            },
            getuserTypeId(e){
                if(this.editList.userTypeId=='1'){
                    this.noShow =true
                }else{
                    this.noShow =false
                }
            },
            //获取列表
            getList(type){
                let that = this;
                if(type!='page'){
                    this.condition.page = 1
                }
                userList(that.condition).then(res => {
                    that.data1 = res.data.data;
                    that.total = res.data.count
                })
            },
            //获取监管单位列表
            getOrgList(){
                let that = this;
                orgList(that.condition).then(res => {
                    that.orgList = res.data
                    //console.log(that.orgList )
                })
            },
            //分页
            changepage(page){
                //console.log(page)
                this.condition.page = page
                this.getList('page')
            },
            //查看详情
            seeDetail (row) {
               // console.log(row)
                let that = this
                that.isShow3 = true
                let data ={
                    id:row.id
                }
                userInfo(data).then(res => {
                  //  console.log(res)
                    that.detail = res.data
                })
            },
            getEdit(row,type){
                if(type==1){
                    this.noShow =false
                    this.isShow = true;
                    this.title = '编辑'
                    this.isAdd = 2
                    this.editList.id = row.id
                    this.editList.realName = row.real_name
                    this.editList.mobile = row.mobile
                    this.editList.userTypeId = row.user_type_id.toString()
                    if(row.supervise_org_id!=undefined){
                        this.editList.superviseOrgId = parseInt(row.supervise_org_id)
                    }
                    if(this.editList.userTypeId==1){
                        this.noShow=true
                    }
                    console.log(this.noShow)
                }else if(type==2){//编辑
                    if(this.editList.realName==''){
                        this.$Message.error('用户名不能为空');
                        return;
                    }else if(this.editList.mobile==''){
                        this.$Message.error('手机号不能为空');
                        return;
                    }else if(this.editList.userTypeId==''){
                        this.$Message.error('角色不能为空');
                        return;
                    }
                    if(this.noShow==true){
                        if(this.editList.superviseOrgId==''){
                            this.$Message.error('监管单位不能为空');
                            return;
                        }
                    }
                    if(!(/^(1[3456789]\d{9})$/).test(this.editList.mobile)){
                        this.$Message.error('手机号格式不正确');
                        return;
                    }
                    if(this.editList.realName.length>45){
                        this.$Message.error('用户名不能太长');
                        return;
                    }
                    let editList = {
                        id:this.editList.id,
                        mobile:this.editList.mobile,
                        realName:this.editList.realName,
                        userTypeId:this.editList.userTypeId.toString(),
                        superviseOrgId:this.editList.superviseOrgId.toString(),
                    }
                    userEdit(editList).then(res => {
                        //console.log(res)
                        if(res.errno!=0){
                            this.$Message.error(res.errmsg.mobile);
                            this.$Message.error(res.errmsg.realName);
                            this.$Message.error(res.errmsg.userTypeId);
                            this.$Message.error(res.errmsg.superviseOrgId);
                        }else{
                            this.isShow = false
                            this.getList();
                        }
                    })
                }else if(type==0){
                    this.noShow =true
                    this.title = '新增'
                    this.isShow = true;
                    this.isAdd = 3
                    this.editList.id = ''
                    this.editList.realName = ''
                    this.editList.mobile = ''
                    this.editList.userTypeId = '' //监管用户 运营用户
                    this.editList.superviseOrgId = ''//监管用户 运营用户
                }else if(type==3){//新增
                    //this.isShow = true;
                    console.log(this.editList.userTypeId)
                    if(this.editList.realName==''){
                        this.$Message.error('用户名不能为空');
                        return;
                    }else if(this.editList.mobile==''){
                        this.$Message.error('手机号不能为空');
                        return;
                    }else if(this.editList.userTypeId==''||this.editList.userTypeId==undefined){
                        this.$Message.error('角色不能为空');
                        return;
                    }
                    if(!(/^(1[3456789]\d{9})$/).test(this.editList.mobile)){
                        this.$Message.error('手机号格式不正确');
                        return;
                    }
                    if(this.editList.realName.length>45){
                        this.$Message.error('用户名不能太长');
                        return;
                    }
                    if(this.noShow==true){
                        console.log(1)
                        if(this.editList.superviseOrgId==''||this.editList.superviseOrgId==undefined){
                            console.log(2)
                            this.$Message.error('监管单位不能为空');
                            return;
                        }
                    }
                    let editList = {
                        mobile:this.editList.mobile,
                        realName:this.editList.realName,
                        userTypeId:this.editList.userTypeId.toString(),
                        superviseOrgId:this.editList.superviseOrgId.toString(),
                    }
                    userAdd(editList).then(res => {
                        if(res.errno!=0){
                            this.$Message.error(res.errmsg.mobile);
                            this.$Message.error(res.errmsg.realName);
                        }else{
                            this.$Message.info({
                                content:'新增成功，初始密码123456',
                                duration:4
                            });
                            this.getList();
                            this.isShow = false
                        }
                    })
                }
            },
            getDel(row,type){
                if(type==1){
                    this.id = row.id
                    this.isShow2 = true;
                }else{
                    let data = {
                        id:this.id
                    }
                    console.log(data)
                    userDelete(data).then(res => {
                        this.isShow2 = false
                        this.getList();
                    })
                }
            },
            cancel(){},
        }
    }
</script>
